<script setup lang="ts">
import LogicFlow from "@logicflow/core";
import "@logicflow/core/dist/style/index.css";
import { BpmnElement } from '@logicflow/extension';
import { onMounted, ref } from "vue";
LogicFlow.use(BpmnElement);

const container = ref<HTMLElement | null>(null)

onMounted(() => {
  let lf = new LogicFlow({
    container: container.value as HTMLElement,
    grid: true,
  })
  lf.render({
    nodes: [
      {
        id: "1",
        type: "bpmn:startEvent",
        x: 100,
        y: 100,
        text: "node1",
      },
      {
        id: "2",
        type: "circle",
        x: 300,
        y: 200,
        text: "node2",
      },
    ],
    edges: [
      {
        sourceNodeId: "1",
        targetNodeId: "2",
        type: "polyline",
        text: "测试边线",
      },
    ],
  })
})

</script>


<style scoped>
.container {
  width: 800px;
  height: 500px;
}
</style>

<template>
  <main>
    <div class="container" ref="container"></div>
  </main>
</template>
